<template>
  <div :class="`${xvueNameSpace}`">
    <div
      v-loading="isLoading"
      class="config-panel"
    >
      <div
        class="container"
        :class="xvueTheme"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="$demoi18n('panel.tab.baseInfo')"
            name="zero"
          >
            <HelpManual link="win-container" />
            <!-- xvue注册的组件 -->
            <xvp-base-info
              ref="xVueBaseInfo"
              :is-hide-share-parameter="true"
              :widget-instance-id="widgetInstanceId"
              :is-exist-config="true"
              :is-hide-save-button="true"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="propertyLabel"
            name="first"
          >
            <panel-property
              ref="panel_property"
              :config="configClone"
              :widget-instance-id="widgetInstanceId"
              :widget="widget"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="$demoi18n('panel.tab.linkage')"
            name="third"
          >
            <panel-linkage
              ref="panel_linkage"
              :config="configClone"
              :widget-instance-id="widgetInstanceId"
            />
          </el-tab-pane>
        </el-tabs>
        <div class="save_box">
          <el-button
            type="primary"
            class="saveBtn"
            @click.stop="saveAllData_()"
          >{{
            $demoi18n('panel.button.apply')
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PanelProperty from './panel-property';
import configPanelBase from '@/mixin/config-panel-base.js';
import HelpManual from '@/components/common/help-manual/help-manual.vue';
import PanelLinkage from '@/components/panel-linkage-new/panel-linkage';
import configData from './config';
export default {
  name: 'PropertyPanelWinContainer',
  components: {
    PanelProperty,
    HelpManual,
    PanelLinkage,
  },
  mixins: [configPanelBase],
  props: ['config', 'orgConfig', 'widgetInstanceId', 'widget'],
  data() {
    return {
      isLoading: false,
      activeName: window.isLocalEnv ? 'first' : 'zero',
      isAurora: this.$platformName === 'Aurora',
    };
  },
  computed: {
    configClone() {
      // 克隆一个config，用于在子组件中直接改变内部属性
      if (this.config) {
        return JSON.parse(JSON.stringify(this.config));
      }
      if (window.isLocalEnv) {
        let _config = configData;
        _config = JSON.parse(JSON.stringify(_config));
        return _config;
      }
      return {};
    },
  },
  watch: {},
  methods: {
    saveAllData_() {
      this.saveAllData();

      // 在vuex存储联动面板的事件
      const property = this.$refs['panel_property']?.form || {};
      const data = this.$refs['panel_data']?.form || {};
      const events = this.getLinkage();
      const curPanelConfig = {
        siteId: this.$route.params.siteId,
        widgetInstanceId: this.widgetInstanceId,
        property,
        data,
        events,
      };
      this.setPanelConfig(curPanelConfig);
      return true;
    },
  },
};
</script>
<style lang="less" scoped>
// 配置面板通用样式，主要有明亮风格和蓝黑，样式名需一致
@import '../../common/less/config-panel.less';
</style>
